<template>
  <div class="main">
    <div class="top">
      <div class="option_wrap">
        <top_option content="未提交" :number="unsubmitedproves.length"
                    :is-choosed="!chooseSubmited"
                    type="unsubmited"></top_option>
        <top_option content="已提交" :number="$store.getters.getSubmitedProvesNumber"
                    :is-choosed="chooseSubmited"
                    type="submited"></top_option>
      </div>
     </div>
    <div class="middle" :class="{middle_chooseSubmited:chooseSubmited}">
      <!--在emit的时候，要么使用updateSelected，要么就使用updateSelected($event)，
          不要传空参，会导致data传进方法里-->
      <template v-if="proves.length>0">
        <middle_option v-for="(item,index) in proves" :key="item.id"
                       :id="item.id" :content="item.content"
                       :tip="item.tip" :index="index" :selected="item.selected"
                       :choose-submited="chooseSubmited"
                       @update-selected="updateSelected($event)"
                       @enter-excel-by-id="enterExcelById($event)">
        </middle_option>
      </template>
      <template v-else>
        <div class="empty_wrap">
          <img :src="emptyimg">
          <span class="text" v-if="chooseSubmited">没有已提交证明哦~</span>
          <span class="text" v-else>没有未提交证明哦~</span>
        </div>
      </template>
    </div>
    <div class="bottom" v-if="!chooseSubmited &&  proves.length>0">
      <bottom_bar content="fuck" :number="selectedNumbeer"
                  :isSelectedAll="isSelectedAll"
                  @dofunction="dofunction($event)"></bottom_bar>
    </div>
    <tip_yesorno v-if="isShowSubmitOrDeleteEnsure"
                 :imgsrc="tip_yesorno_img"
                 :imgwidth="tip_yesorno_width"
                 :imgheight="tip_yesorno_height"
                 :title="tip_yesorno_title"
                 :content="tip_yesorno_content"
                 @closetip_ensure="closeEnsureAndDoFunction($event)"
                 @closetip_cancel="closeEnsure($event)"></tip_yesorno>
    <tip_loading v-if="isShowTipLoading"></tip_loading>
  </div>
</template>

<script>
import tipLoading from '../../components/public/tip_loading'
import tipYesOrNo from '../../components/public/tip_yesorno'
import topOption from '../../components/file/top_option'
import middleOption from '../../components/file/middle_option'
import bottomBar from '../../components/file/bottom_bar'
import submitimg from '../../assets/img/pluto-done-1.svg'
import deleteimg from '../../assets/img/virtual-reality.svg'
import emptyimg from '../../assets/img/pluto-sign-in.svg'
// 使用Indicator
import { mapMutations } from 'vuex'
// 引入证明端的业务层
import certificationServices from '../../service/certification'
export default {
  name: 'file',
  data () {
    return {
      proves: [],
      submitedproves: [],
      unsubmitedproves: [],
      chooseSubmited: false,
      isSelectedAll: false,
      isShowSubmitOrDeleteEnsure: false,
      isFunctionOne: false,
      submitimg: submitimg,
      deleteimg: deleteimg,
      emptyimg: emptyimg,
      tip_yesorno_img: submitimg,
      tip_yesorno_width: 147,
      tip_yesorno_height: 101,
      tip_yesorno_title: '是否确认提交？',
      tip_yesorno_content: '确认后不可更改',
      isShowTipLoading: false // 是否显示loading
    }
  },
  computed: {
    selectedNumbeer () {
      let count = 0
      for (let i = 0; i < this.proves.length; i++) {
        if (this.proves[i].selected === true) {
          count++
        }
      }
      return count
    }
  },
  components: {
    top_option: topOption,
    middle_option: middleOption,
    bottom_bar: bottomBar,
    tip_yesorno: tipYesOrNo,
    tip_loading: tipLoading
  },
  async mounted () {
    // 显示loading框
    this.isShowTipLoading = true
    /* 为submitedproves准备数据 */
    let resultUnsubmited = await certificationServices.getCertification(false, this.$store.getters.getLoginUser.organization)
    resultUnsubmited = resultUnsubmited.data
    if (resultUnsubmited.code === -1) {
      alert('服务器出错：' + resultUnsubmited.msg + ', 请稍后再试')
      return
    }
    resultUnsubmited = resultUnsubmited.data
    for (let i = 0; i < resultUnsubmited.length; i++) {
      let json = {
        id: resultUnsubmited[i].id,
        content: resultUnsubmited[i].actName,
        tip: resultUnsubmited[i].actTip,
        time: resultUnsubmited[i].time,
        selected: false
      }
      // 可以用一个临时数组存储这些值，然后this.unsubmitedproves = tmp，改变引用
      // 但是如果是这种改变数组内部值的形式，需要用set，否则vue无法检测出来
      this.$set(this.unsubmitedproves, i, json)
    }
    /* 为unsubmitedproves准备数据 */
    let resultSubmited = await certificationServices.getCertification(true, this.$store.getters.getLoginUser.organization)
    resultSubmited = resultSubmited.data
    if (resultSubmited.code === -1) {
      alert('服务器出错：' + resultSubmited.msg + ', 请稍后再试')
      return
    }
    resultSubmited = resultSubmited.data
    for (let i = 0; i < resultSubmited.length; i++) {
      let json = {
        id: resultSubmited[i].id,
        content: resultSubmited[i].actName,
        tip: resultSubmited[i].actTip,
        time: resultSubmited[i].time,
        selected: false
      }
      this.$set(this.submitedproves, i, json)
    }
    // 更新vuex中SubmitedProvesNumber的值
    this.setSubmitedProvesNumber(this.submitedproves.length)
    if (this.$route.params.type !== null &&
        this.$route.params.type === 'submited') {
      this.proves = this.submitedproves
      this.chooseSubmited = true
    } else {
      this.proves = this.unsubmitedproves
      this.chooseSubmited = false
    }
    // ajax完毕，关闭loading框
    this.isShowTipLoading = false
    // alert('async mounted执行完毕')
  },
  destroyed () {
    // 在ajax途中如果退出，也关闭loading框
    this.isShowTipLoading = false
  },
  methods: {
    ...mapMutations([
      'incrementSubmitedProvesNumber', // 将this.incrementSubmitedProvesNumber()映射为this.$store.commit('incrementSubmitedProvesNumber')
      'setSubmitedProvesNumber', // 将this.initSubmitedProvesNumber()映射为this.$store.commit('initSubmitedProvesNumber')
    ]),
    getUnsubmitedProves () {
      this.proves = this.unsubmitedproves
      this.chooseSubmited = false
    },
    getSubmitedProves () {
      this.proves = this.submitedproves
      this.chooseSubmited = true
    },
    updateSelected (data) {
      // alert('updateSelected开始执行')
      // alert(this.proves[data.index].selected)
      this.proves[data.index].selected = !data.selected
      // alert(this.proves[data.index].selected)
      // 在全选状态下，点击后变成取消，那么全选状态应该自动结束
      if (this.isSelectedAll === true &&
          this.proves[data.index].selected === false) {
        this.isSelectedAll = false
      }
      // alert('updateSelected执行完毕')
    },
    selectedAll () {
      if (this.isSelectedAll === false) {
        // 如果还没有勾选全选，则全选
        for (let i = 0; i < this.proves.length; i++) {
          if (this.proves[i].selected === false) {
            this.proves[i].selected = !this.proves[i].selected
          }
        }
        this.isSelectedAll = !this.isSelectedAll
      } else {
        // 如果已经勾选全选，再点击时不选
        for (let i = 0; i < this.proves.length; i++) {
          if (this.proves[i].selected === true) {
            this.proves[i].selected = !this.proves[i].selected
          }
        }
        this.isSelectedAll = !this.isSelectedAll
      }
    },
    dofunction (isFunctionOne) {
      if (this.selectedNumbeer === 0) {
        return
      }
      if (isFunctionOne) {
        this.tip_yesorno_img = deleteimg
        this.tip_yesorno_width = 136
        this.tip_yesorno_height = 150
        this.tip_yesorno_title = '是否确认删除？'
        this.tip_yesorno_content = ''
      } else {
        this.tip_yesorno_img = submitimg
        this.tip_yesorno_width = 147
        this.tip_yesorno_height = 101
        this.tip_yesorno_title = '是否确认提交？'
        this.tip_yesorno_content = '确认后不可更改'
      }
      this.isFunctionOne = isFunctionOne
      this.showEnsure()
    },
    showEnsure () {
      this.isShowSubmitOrDeleteEnsure = true
    },
    closeEnsure () {
      this.isShowSubmitOrDeleteEnsure = false
    },
    async closeEnsureAndDoFunction () {
      let data = {
        name: 'tip_operation',
        params: {
          tiptitle: '',
          leftcontent: '',
          lefturl: 'file',
          lefturltype: 'unsubmited',
          rightcontent: '查看已提交',
          righturl: 'file',
          righturltype: 'submited',
          footChoose: 'file'
        }
      }
      // 把需要提交或者删除的id都放到一起
      let actIds = []
      for (let i = 0; i < this.proves.length; i++) {
        if (this.proves[i].selected === true) {
          actIds.push(this.proves[i].id)
        }
      }
      if (this.isFunctionOne) {
        // 如果是删除的功能
        data.params.tiptitle = '删除成功！'
        data.params.leftcontent = '查看未提交'
        // 进行axios请求
        await certificationServices.operateCertificationByActId('delete', actIds)
      } else {
        // 如果是提交的功能
        data.params.tiptitle = '提交成功！'
        data.params.leftcontent = '继续提交'
        // 进行axios请求
        await certificationServices.operateCertificationByActId('submit', actIds)
      }
      // 在完成本函数以后路由才会跳转
      this.$router.push(data)
      this.closeEnsure()
    },
    async enterExcelById (data) {
      // 根据id从后端获取excel表格的数据，并传入新页面
      let result = await certificationServices.getActStudentsByActId(data.id)
      result = result.data
      if (result.code === -1) {
        alert('服务器出现异常，请稍后再试')
        return
      }
      result = result.data
      // 在第一行插入姓名、学号、学院的首行信息
      result.unshift({
        name: '姓名',
        studentId: '学号',
        college: '学院'
      })
      let json = {
        name: 'excelview',
        params: {
          title: data.title,
          content: result,
          footChoose: 'file'
        }
      }
      this.$router.push(json)
    }
  }
}
</script>

<style lang="scss" scoped>
  .main{
    width: 100%;
    height: 100%;
    background: $background-color;
  }
  .top {
    width: 100%;
    height: px2rem(44);
    background-color: #FFF;
    .option_wrap{
      width: px2rem(231);
      height: px2rem(44);
      /*border: px2rem(2) solid red;*/
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }
    /*border: px2rem(2) solid red;*/
  }
  .middle{
    width: 100%;
    // 因为有10px的内边距padding，会撑大middle
    // 所以总体的height需要减10
    height: calc(100% - #{px2rem(44)} - #{px2rem(20)} - #{px2rem(56)} );
    padding-bottom: px2rem(20);
    background-color: $background-color;
    /*border: px2rem(1) solid black;*/
    overflow: scroll;
    .empty_wrap{
      /*border: px2rem(2) solid red;*/
      margin-top: 40%;
      text-align: center;
      img {
        width: px2rem(202);
        height: px2rem(120);
        /*border: px2rem(2) solid red;*/
      }
      .text{
        display: block;
        /*border: px2rem(2) solid red;*/
        margin-top: px2rem(20);
        font-size: $text-size-normal;
        line-height: px2rem(14);
        color: #999999;
      }
    }
  }
  .middle_chooseSubmited{
    // 如果是选择已提交，不需要显示bottom_bar，也就不需要-56
    height: calc(100% - #{px2rem(44)} - #{px2rem(20)});
  }
  .bottom{
    width: 100%;
    height: px2rem(54);
    position: fixed;
    bottom: px2rem(55);
    border-bottom: px2rem(2) solid $background-color;
    //background-color: #FFF;
  }
</style>
